<template>
  <!-- 素材库页面———组件 -->
  <div class="library">
    <div class="banner">
      <img alt="" src="../assets/library_banner.png" />
    </div>
    <div class="common">
      <div class="design">
        <div class="design_top">
          <p>设计素材</p>
          <p>BACKGROUND</p>
        </div>
        <!-- 主体 -->
        <div class="design_bottom">
          <div
            class="designbtm_left"
            @click="go(data1[0].id)"
            @mouseleave="change2c"
            @mouseover="changec"
          >
            <p>
              <!--              <img alt="" :src="../assets/library_one1.png"/>-->
              <img :src="data1[0].image" alt="" />
            </p>
            <p v-show="p_show">{{ data1[0].title }}</p>
          </div>
          <div class="designbtm_right">
            <div
              v-for="(item, index) in data1.slice(1, 5)"
              :key="index"
              class="right"
              @click="go2(item.id)"
              @mouseleave="change2"
              @mouseover="change(index)"
            >
              <p>
                <img :src="item.image" alt="著名美工师某某设计，海苦的声音" />
              </p>
              <p :class="{ addclass: index == num }" class="abc">
                {{ item.title }}
              </p>
            </div>
          </div>
        </div>
        <div class="design_last">
          <div
            v-for="(item, index) in data1.slice(4, 8)"
            :key="index"
            class="btmbox"
            @click="go3(item.id)"
            @mouseleave="change2a"
            @mouseover="changea(index)"
          >
            <p>
              <img :src="item.image" alt="著名美工师某某设计，海苦的声音" />
            </p>
            <p :class="{ addclass: index == num2 }" class="abc">
              {{ item.title }}
            </p>
          </div>
        </div>
        <button @click="routers()">查看更多素材</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "library",
  components: {},
  props: {
    data1: Array,
  },
  data() {
    return {
      // 隐藏p
      num: null,
      num2: null,
      p_show: false,
    };
  },
  methods: {
    change(index) {
      this.num = index;
    },
    change2() {
      this.num = null;
    },
    changea(index) {
      this.num2 = index;
    },
    change2a() {
      this.num2 = null;
    },
    changec() {
      this.p_show = true;
    },
    change2c() {
      this.p_show = false;
    },
    routers() {
      this.$router.push("/Material");
    },
    go(a) {
      this.$router.push({
        path: "/Sourexq",
        query: {
          id: a,
          name: 4,
        },
      });
    },
    go2(a) {
      this.$router.push({
        path: "/Sourexq",
        query: {
          id: a,
          name: 4,
        },
      });
    },
    go3(a) {
      this.$router.push({
        path: "/Sourexq",
        query: {
          id: a,
          name: 4,
        },
      });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.addclass {
  display: block !important;
}

.abc {
  display: none;
  transition: opacity 3s;
}

.library {
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  .banner {
      width: 100%;

      img {
        display: block;
        width: 100%;
      }
    }
  .common {
    width: 1200px;
    margin: 0 auto;

    .design {
      .design_top {
        width: 100%;
        text-align: center;
        margin-top: 52px;

        :nth-child(1) {
          color: #333;
          font-size: 28px;
        }

        :nth-child(2) {
          color: #999;
          margin-top: 10px;
          font-size: 18px;
        }
      }

      .design_bottom {
        margin-top: 78px;
        display: flex;
        justify-content: space-between;

        .designbtm_left {
          width: 577px;
          overflow: hidden;
          text-align: center;
          position: relative;
          margin-bottom: 29px;
          box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.1);
          cursor: pointer;

          :nth-child(1) {
            width: 100%;

            img {
              display: block;
              width: 100%;
            }
          }

          :nth-child(2) {
            width: 100%;
            background-color: rgba($color: #000000, $alpha: 0.3);
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            border-radius: 0px 0px 5px 5px;
            position: absolute;
            bottom: 0;
          }

          // titile消失
        }

        .designbtm_right {
          width: 577px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          text-align: center;

          .right {
            box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.1);
            position: relative;
            margin-bottom: 43px;
            cursor: pointer;
            width: 45%;

            :nth-child(1) {
              width: 100%;

              img {
                display: block;
                width: 100%;
              }
            }

            :nth-child(2) {
              width: 100%;
              background-color: rgba($color: #000000, $alpha: 0.3);
              color: #fff;
              font-size: 16px;
              line-height: 40px;
              border-radius: 0px 0px 5px 5px;
              position: absolute;
              bottom: 0;
            }
          }
        }
      }

      .design_last {
        width: 1200px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;

        .btmbox {
          width: 266px;
          box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.1);
          position: relative;
          margin-bottom: 29px;
          cursor: pointer;

          :nth-child(1) {
            width: 100%;

            img {
              display: block;
              width: 100%;
            }
          }

          :nth-child(2) {
            width: 100%;
            background-color: rgba($color: #000000, $alpha: 0.3);
            color: #fff;
            font-size: 16px;
            line-height: 40px;
            border-radius: 0px 0px 5px 5px;
            position: absolute;
            bottom: 0;
          }
        }
      }

      button {
        display: block;
        width: 214px;
        height: 58px;
        margin: 0 auto;
        font-size: 20px;
        color: #ffffff;
        line-height: 48px;
        background: #33cfff;
        border-radius: 29px;
        outline: none;
        border: none;
        margin-top: 43px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
